import React, { Component } from 'react';
import { StyleSheet, Text, View, Dimensions, Image, TouchableOpacity, TextInput, Picker } from "react-native";
import { style } from '../../../../../theme/style';
import { offerStyle } from './offerStyle';
import { TimeDayCpt } from './TimeDayCpt';
import Utils from '../../../../../utils/utils';
import { initDate } from './offerMap';


const ScreenWidth = Dimensions.get('window').width;
const scale = ScreenWidth / 375;

export class RadoiCpt extends Component {

	constructor(props) {
		super(props);
		this.state = {}

		let { data } = props || {};
		let { other, listData, title, selectKey } = data || {};
		let { type } = other || {};

	}

	async componentWillReceiveProps(props) {
		let { data } = props || {};
		let { other, id, title, listData } = data || {};
		let { type } = other || {};
		console.log('props----', title, props)



		// this.setState({
		// 	ls: true
		// })
		// console.log(title, '-----------------------------------------------------------------')
		// if (type === 'time-hours' || type === 'time-day') {
		// 	this.setState({
		// 		otherData: other,
		// 	}, () => { })
		// }


	}

	//
	_getIndex = () => {
		let { data } = this.props || {};
		let { listData, selectKey } = data || {};
		let resultsIndex = -1;
		listData && listData.forEach((item, index) => {
			if (item.dictKey == selectKey) {
				resultsIndex = index;
			}
		})
		return resultsIndex;
	}

	// 其他-输入
	_renderInput = (otherSendData) => {
		console.log('----输入----', otherSendData)
		let { callBack } = this.props;
		let { id, value, placeHolder, lay, unit, keyboardType } = otherSendData || {};
		return <View style={[offerStyle.row, offerStyle.other, { width: 110 * scale }]}>
			{lay ? <Text style={offerStyle.otherLay}>{lay}</Text> : null}
			<TextInput
				style={offerStyle.otherInput}
				defaultValue={Utils.numberToString(value)}
				placeholder={placeHolder || '请输入'}
				placeholderTextColor={"#999"}
				underlineColorAndroid='transparent'
				keyboardType={keyboardType || 'numeric'}
				onChangeText={(inputValue) => {
					callBack && callBack({ [id]: inputValue });
				}}
			/>
			{unit ? <Text style={offerStyle.otherLay}>{unit}</Text> : unit}
		</View>
	}

	_planeCallback = (planeData) => {
		let { callBack } = this.props;
		console.log('planeData', planeData)
		callBack && callBack(planeData);
	}

	// 其他-时间-day
	_renderTimeDay = (otherSendData) => {
		console.log('----日期----', otherSendData)
		otherSendData.valueStart = otherSendData.intentionPlanEndDate;
		otherSendData.valueEnd = otherSendData.intentionPlanEndDate;
		return <TimeDayCpt event={{ planeCallback: this._planeCallback }} data={otherSendData} />
	}



	// 其他-时间-hours
	_renderTimeHours = (otherSendData) => {
		console.log('----小时----', otherSendData)
		let { callBack } = this.props || {};
		//let { otherData } = this.state || {};
		let { effectiveHour, effectiveMinute } = otherSendData || {};
		return <View style={[offerStyle.row, offerStyle.other, { justifyContent: 'space-around', alignItems: 'center', position: 'relative', height: 18 * scale, width: 180 * scale }]}>
			<TextInput
				style={offerStyle.otherInput}
				defaultValue={Utils.numberToString(effectiveHour)}
				placeholderTextColor={"#999"}
				underlineColorAndroid='transparent'
				keyboardType={'numeric'}
				onChangeText={(inputValue) => {
					callBack && callBack({ 'effectiveHour': inputValue });
				}}
			/>
			<Text style={offerStyle.otherLay}>时</Text>
			<TextInput
				style={offerStyle.otherInput}
				defaultValue={Utils.numberToString(effectiveMinute)}
				placeholderTextColor={"#999"}
				underlineColorAndroid='transparent'
				keyboardType={'numeric'}
				onChangeText={(inputValue) => {
					callBack && callBack({ 'effectiveMinute': inputValue });
				}}
			/>
			<Text style={offerStyle.otherLay}>分</Text>
		</View>
	}

	//其他 - dome 
	_otherRender = (otherData) => {
		let { type } = otherData || {};
		if (type === 'input') {
			return this._renderInput(otherData);
		} else if (type === 'time-day') {
			return this._renderTimeDay(otherData);
		} else if (type === 'time-hours') {
			return this._renderTimeHours(otherData);
		}
		return null;
	}

	//计划上架时间


	// 选中函数
	_select = (selectKey, index) => {
		let { callBack, data } = this.props || {};
		let { listData, other, id, readOnly } = data || {};
		if (readOnly) {
			return
		}
		this.props.data.selectKey = selectKey;
		this.setState({
			ls: true
		}, () => {
			callBack && callBack(initDate.other({ [id]: selectKey }));
		})
	}

	//—
	_IconTime = () => {
		let { callBack, data } = this.props;
		let { selectKey } = data || {};
		return (
			<TouchableOpacity onPress={() => { callBack && callBack() }} style={[offerStyle.row, styles.timeBox]} >
				<Image style={styles.timeIcon} source={require('../../../../../imgs/global/timeSelectIcon.png')} />
				<Text style={[offerStyle.fontSize, offerStyle.fontBold]}>{selectKey}</Text>
			</TouchableOpacity>
		)
	}

	//
	_resultCall = (data) => {
		console.log('data', data)
	}

	//
	// _setTimeCallback = (timeData) => {
	// 	let { callBack, data } = this.props || {};
	// 	let { id } = data || {};
	// 	this.setState({ ls: true }, () => {
	// 		callBack && callBack({ id, value: timeData });
	// 	})
	// }




	render() {
		let { data } = this.props || {};
		let { title, listData, required, other, selectKey, readOnly } = data || {};
		let { otherKey } = other || {};
		return (
			<View style={[offerStyle.lineBox, { justifyContent: 'flex-start', alignItems: 'flex-start' }]}>
				<View style={[offerStyle.row, offerStyle.lay]}>
					{required ? <Text style={[offerStyle.radioRequire, offerStyle.required]}>*</Text> : null}
					<Text style={styles.fontSize}>{title || '-'}:</Text>
				</View>

				<View style={styles.radioBox}>
					{
						title === '计划上架时间' ? this._IconTime() : (
							<View style={[offerStyle.row, { flexWrap: 'wrap', justifyContent: 'flex-start', alignItems: 'flex-start' }]}>
								{
									listData && listData.map((item, index) => {
										return (
											<TouchableOpacity onPress={() => { this._select(item.dictKey, index) }} key={index} style={[offerStyle.row, { justifyContent: 'space-between', alignItems: 'center' }, (((listData.length - 1) == index) && other) ? null : styles.radioItem]}>
												<View style={[styles.circle]}>
													{selectKey == item.dictKey ? <View style={styles.selectedCircle}></View> : null}
												</View>
												<Text style={[offerStyle.fontSize, selectKey == item.dictKey ? offerStyle.fontBold : null]}>{item.dictName}</Text>
											</TouchableOpacity>
										)
									})
								}
								{otherKey == selectKey && this._otherRender(other)}
							</View>
						)
					}
					{/* <Text style={[offerStyle.error, offerStyle.errorBox]}>错误信息</Text> */}
				</View>
			</View >
		)
	}
}

const styles = StyleSheet.create({
	circle: {
		width: 14 * scale,
		height: 14 * scale,
		borderStyle: 'solid',
		borderColor: '#0E7FFD',
		borderWidth: 1 * scale,
		borderRadius: 7 * scale,
		alignItems: 'center',
		justifyContent: 'center',
		marginRight: 6 * scale,
	},
	selectedCircle: {
		width: 6 * scale,
		height: 6 * scale,
		borderStyle: 'solid',
		borderColor: '#0E7FFD',
		borderWidth: 1 * scale,
		borderRadius: 3 * scale,
		backgroundColor: '#0E7FFD',
	},
	radioItem: {
		marginRight: 20 * scale,
		marginBottom: 10 * scale
	},
	radioBox: {
		width: 220 * scale,
	},
	timeIcon: {
		tintColor: style.color.themeColor,
		width: 17 * scale,
		height: 20 * scale,
		marginRight: 10 * scale
	},
	timeText: {
		fontSize: 13 * scale,
		color: '#333'
	},
	timeBox: {
		flexDirection: 'row',
		alignItems: 'center'
	},
	fromTime: {
		width: 85 * scale
	}

})